<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14-表单输入绑定</title>
</head>
<style>
  *{
    list-style: none;
    margin: 0;
    padding: 0;
  }
</style>
<body>
  <!-- 基础用法 -->

  <!-- 1.文本 -->
  <div id="app1">
     <input type="text" v-model=' msg ' placeholder="Edit me">
     <p>Msg is: {{ msg }}</p>
  </div>
  
  <!-- 2.多行文本 -->
  <div id="app2">
     <span>这里有多行文本:</span>
     <p >{{msg}}</p>
     <textarea name="" id="" cols="30" rows="10" v-model='msg'></textarea>
  </div>

  <!-- 3.单个复选框,绑定到布尔值 -->
  <div id="app3">
     <input type="checkbox" id="checkbox" v-model='checked'>
     <label for="checkbox">{{ checked }}</label>
  </div>

  <!-- 4.多个复选框,绑定到同一个数组 -->
  <div id="app4">
    <input type="checkbox" id="songqizong" value="Songqizong" v-model='checkedNames'>
    <label for="songqizong">Songqizong</label>
    <input type="checkbox" id="zhangyixiao" value="Zhangyixiao" v-model='checkedNames'>
    <label for="zhangyixiao">Zhangyixiao</label>
    <input type="checkbox" id="zhoujielun" value="Zhoujielun" v-model='checkedNames'>
    <label for="zhoujielun">Zhoujielun</label>
    <br/>
    <span>这是选中的名字:{{checkedNames }}</span>
  </div>
  <!-- 5.单选按钮 -->
  <div id="app5">
     <input type="radio" id="one" value="One"  v-model='picked'>
     <label for="one">One</label>
     <input type="radio" id="two" value="Two" v-model='picked'>
     <label for="two">Two</label>
     <br>
     <span>Picked:{{picked}}</span>
  </div>
  <!-- 5.1单选框中设置默认值 -->
  <div id="app6">
     <li v-for='(value,i) in addList' :key='value.id'>
       <input type="radio" class="radio" name='radios' :value='i' v-model='radio' >
       {{ value.list}}
     </li>
  </div>
  <div id="app7">
    <li v-for='(value,i) of addList' :key='value.id'>
      <input type="radio" :value='i' v-model='flag'>
      {{value.list}}
    </li>
  </div>
  <!-- 6.选择框 -->
  <div id="app8">
    <select name="" id="" v-model='selected'>
      <option value="" disabled>请选择</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <span>Selected: {{ selected}}</span>
  </div>
  <!-- 7.用v-for渲染的动态选项 -->
  <div id="app9">
     <select name="" id="" v-model='selected'>
       <option value="" v-for='option in options' :value='option.value'>
         {{ option.text }}
       </option>
     </select>
     <span>Selected:{{ selected }}</span>
  </div>
</body>
<script src="./vue1111.js"></script>
<script>
  var App1 = new Vue({
    el:"#app1",
    data:{
      msg:''
    }
  });
  var App2 = new Vue({
    el:'#app2',
    data:{
      msg:''
    }
  });
  var App3 = new Vue({
    el:'#app3',
    data:{
      checked:false
    }
  });
  var App4 = new Vue({
    el:'#app4',
    data:{
      checkedNames:[]
    }
  });
  var App5 = new Vue({
    el:'#app5',
    data:{
      picked:'one',
    }, 
  });
  var App6 = new Vue({
    el:'#app6',
    data:{
      radio:0,
      addList:[
        {list:'男'},
        {list:'女'},
      ]
    }
  });
  var App7 = new Vue({
    el:'#app7',
    data:{
      flag:0,
      addList:[
        {list:'A'},
        {list:'B'},
        {list:'c'},
      ]
    }
  });
  var App8 = new Vue({
    el:'#app8',
    data:{
      selected:''
    }
  });
  var App9 = new Vue({
    el:'#app9',
    data:{
      selected:'A',
      options:[
        {text:'one', value:'A'},
        {text:'two',value:'B'},
        {text:'three',value:'C'},
      ]
    }
  })
</script>
</html>